<template>
	<view class="container pad30">
		<sb-back-icon></sb-back-icon>
		<view class="flex j-c padv30">
			<sb-img :src="info.avatar" @click.native="chooseAvatar" w="180" shadow r="180"></sb-img>
		</view>
		<u-cell-group>
			<u-cell-item title="UserId" :value="info.id" :arrow="false">
			</u-cell-item>
			<u-cell-item title="UserName" @click="update('username')" :value="info.username" />
			<u-cell-item title="NickName" @click="update('nickname')" :value="info.nickname" />
			<u-cell-item title="RealName" @click="update('realname')" :value="info.realname" />
			<u-cell-item title="BirthDay" @click="update('birthday')" :value="info.birthday" />
			<u-cell-item :arrow="false" title="LastLoginAt" :value="$fmtTime(info.lastLoginAt)" />
		</u-cell-group>
		<u-gap height="40"></u-gap>
		<u-cell-group>
			<u-cell-item title="Update Password" @click="$go2('./change-password')" />
		</u-cell-group>

		<u-gap height="30"></u-gap>

		<sb-center>
			<view class="flex j-c c-m a-c padv50 btn-danger" @click="logout">
				LOGOUT
			</view>
		</sb-center>

		<u-modal v-model="show" @confirm="confirm" show-cancel-button title="Update Info" :async-close="true">
			<view class="slot-content" style="padding: 20rpx">
				<u-input v-model="tempField" @click="openCalendar" placeholder="请选择日期"></u-input>
				<u-calendar v-model="calendarShow" @change="(e) => (tempField = e.result)"></u-calendar>
			</view>
		</u-modal>
	</view>
</template>
<script>
	import { KEY_TOKEN, KEY_LOGIN_USER_INFO } from "@/config/constant";
	import { HOME_PAGE_PATH } from "@/config";
	import _ from 'love-u'
	export default {
		data() {
			return {
				info: {},
				code: "",
				show: false,
				tempField: "",
				key: "",
				showPicker: false,
				calendarShow: false,
				currentFiled: "",
			};
		},
		onLoad: function() {
			if (!this.$checkLogin()) return this.$redirect2Login();
			this.getInfo();
			uni.$on("uAvatarCropper", (path) => {
				this.handleUploadAvatar(path);
			});
		},
		methods: {
			openCalendar() {
				if (this.currentFiled === "birthday") {
					this.calendarShow = true;
				}
			},
			// 上传修改头像
			async handleUploadAvatar(filePath) {
				let { success: s1, data } = await this.$upload({
					filePath,
					category: "user"
				});
				//上传完更新数据库
				if (!s1) return this.$msg("头像上传失败");

				let { success } = await this.$postF("/user/updateField", {
					key: "avatar",
					val: data,
					id: this.info.id,
				});

				(success && this.$msg("更新成功")) || this.$msg("更新失败");

				this.getInfo();
			},
			chooseAvatar() {
				this.$go2(this.$makeUrl("/uview-ui/components/u-avatar-cropper/u-avatar-cropper", {
					destWidth: 150,
					rectWidth: 100,
					fileType: "jpg",
				}));
			},
			// 退出登录
			async logout() {
				await this.$confirm("Confirm to Logout ?");
				this.$removeCache(KEY_TOKEN);
				this.$removeCache(KEY_LOGIN_USER_INFO)
				this.$redirect2Login();
			},
			// 修改数据
			update(filed) {
				this.tempKey = filed;
				this.tempField = this.info[filed === "ENTERPRISE" ? "company" : filed];
				this.show = true;
				this.currentFiled = filed;
			},

			async getInfo() {
				let { success, data } = await this.$get("/user/getUserInfo");
				if (success) this.info = data;
			},
			async updateData(key, val) {
				let { success } = await this.$postF("/user/updateField", {
					key,
					val,
					id: this.info.id,
				});
				this.$msg(success ? "更新成功" : "更新失败", () => this.getInfo());
			},
			async confirm() {
				await this.updateData(this.tempKey, this.tempField);
				this.show = false;
			},
		},
	};
</script>

<style lang="scss">
	.container {
		/deep/ {
			.u-cell_title {
				font-weight: bold;
			}
		}
	}

	.btn-danger {
		background-color: #CC0033;
		color: #fff;
		width: 400rpx;
		height: 70rpx;
		border-radius: 35rpx;
	}
</style>
